<template>
    <div class="addressListFontS">
      <div>
        <div class="header flex">
          <div style="width: 10%" v-on:click="toPersonal">
            <img style="width: 1.25rem;height: 1.25rem" src="../../assets/img/left.png">
          </div>
          <div style="width: 80%">
            <span style="font-size: 1rem">{{title}}</span>
          </div>
          <div style="width: 10%"></div>
        </div>
      </div>
      <div class="flex_center">
        <div class="bodyContent">
          <loading v-if="showLoading"></loading>
          <div class="address_each white_bac addlist_mar" v-for="(address,index) in addList" v-if="!showLoading">
            <div class="addressListPad">
              <p class="flex flex_between"><span style="font-weight: bold">{{address.name}}</span><span style="font-weight: bold;font-size: 0.9rem">{{address.mobile}}</span></p>
              <p class="text_left addList_borderbor" >{{address.area_info+address.position_address+address.address}}</p>
              <div class="flex flex_between addlist_borderBot" >
                <p style="width: 30%" class="text_left addList_borderbor" @click="deleteAddress(address,index)">
                  <i style="font-size: 1rem;font-weight: bold;color: #949292" class="fa fa-trash-o"></i>
                </p>
                <router-link :to="{path:'/qds/editAddress',query: {id:address.id,type:0}}">
                  <p style="width: 30%" class="text_right addList_borderbor">
                    <i style="font-size: 1rem;font-weight: bold" class="fa fa-pencil-square-o"></i>
                  </p>
                </router-link>
              </div>
              <div class="flex flex_between build_order_pad addList_borderbor" @click="setAddressDefault(address)">
                <div class="positon_re" >
                  <input id="item1" type="radio" disabled name="item" value="默认地址" hidden :checked='address.is_default == 1' style="display: none">
                  <label for="item1"></label>
                  <span>默认地址</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <router-link :to="'/qds/addAddress'">
       <!--<button class="addListButton" type="button">添加收货地址</button>-->
        <mu-button color="primary" type="button">添加收货地址</mu-button>
      </router-link>
    </div>
</template>

<script>
  import HeaderTilte from "../../components/headerTilte";
  import Loading from "../../components/loading";
    export default {
      components: {
        Loading,
        HeaderTilte},
      data(){
        return{
          title:'地址列表',
          addList:[],
          showLoading:true,
        }
      },
      mounted(){
        this.checkLogin();
        this.initH();
        this.initAddList();
      },
      methods:{
        initH(){
          var allH = document.documentElement.clientHeight;
          var headerH = $('.header').outerHeight(true);
          var footH = $('.mu-ripple-wrapper ').height();
          var h = allH - headerH - footH;
          $('.bodyContent').css('height',h + 'px');
        },
        initAddList(){
          let self = this;
          this.yesS.addressList(
            this.$comParams()
            ).then(res => {
              self.addList = res.data.address_list;
              this.showLoading = false;
            })
        },
        deleteAddress(obj,index){

          this.$confirm('您将删除该地址，是否确认删除？', '提示', {
            type: 'warning'
          }).then(({ result }) => {
            if (result) {
              this.sureDelete(obj,index);
            }
          });
        },
        sureDelete(obj,index){
          this.yesS.sureDeleteAddress(this.$combineParams({
            id:obj.id,
            name:obj.name,
            mobile:obj.mobile,
            address:obj.address,
            area_info:obj.area_info
          })).then(res => {
            this.addList.splice(index, 1);
            this.$toast.success('删除成功');
          })
        },
        setAddressDefault(obj){
          for(var i=0;i<this.addList.length;i++){
            this.addList[i].is_default = 0;
          }
          obj.is_default = 1;
          //将当前选中的地址设置为默认地址
          this.yesS.setDefaultAddress(this.$combineParams({
            id:obj.id
          })).then(res => {

          })
        },
        toPersonal(){
          this.$router.push({path:'/qds/personall'})
        }
      },
        name: "Address-list"
    }
</script>

<style scoped>
  @import "./css/addressList.css";
  /*@import 'http://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css';*/
  .bob{
    border-bottom: 1px solid salmon;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    align-items: center;
    -webkit-align-items: center;
    padding: 1rem;
  }

  input[type="radio"]{
    content: "\a0"; /*不换行空格*/
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    width: 1em;
    height: 1em;
    margin-right: .4em;
    border-radius: 50%;
    border: 1px solid #01cd78;
    text-indent: .15em;
    line-height: 1;
  }
  button{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
    background: salmon;
    width: 100%;
    border: none;
    color: #fff;
    font-size: 1rem;
  }
  .bodyContent{
    overflow: hidden;
    overflow-y: auto;
  }

  .header{
    width: 100%;
    padding: 0.5rem;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    border-bottom: 1px solid #c3c3c3;
    background: #fff;
    position: relative;
  }
  .header img{
    width: 1.25rem;
    height: 1.25rem;
  }
</style>
